<div style="width: 100%;height: 100%;position: relative;margin-bottom: 40px">
	<mat-icon (click)="onNoClick()" style="float:right;cursor:pointer;color:gray;position: relative; top: 10px; right: 0px">clear</mat-icon>
	<mat-tab-group style="width: 100%;">
		<mat-tab label="{{'gauges.property-props' | translate}}">
			<div style="max-height: 540px; overflow-y: auto; overflow-x: hidden; padding-top: 15px;">
				<div style="display: block;">
					<div class="my-form-field">
						<span>{{'gauges.property-name' | translate}}</span>
						<input [(ngModel)]="data.settings.name" style="width: 220px" type="text">
					</div>
					<div class="my-form-field" style="vertical-align: bottom; margin-left: 13px;">
						<span>{{'gauges.property-permission' | translate}}</span>
						<div style="width:80px;height:30px;background-color:#f1f3f4;text-align:center;cursor:pointer;" (click)="onEditPermission()">
							<mat-icon class="header-icon" style="line-height: 30px;" *ngIf="!property || !property.permission">lock_open</mat-icon>
							<mat-icon class="header-icon" style="line-height: 30px;" *ngIf="property && property.permission">lock</mat-icon>
						</div>
					</div>
					<div class="toolbox" *ngIf="isToolboxToShow()">
						<button mat-icon-button (click)="onAddInput()">
							<mat-icon>add_circle_outline</mat-icon>
						</button>
						<button mat-icon-button (click)="slideView = !slideView;onRangeViewToggle()" *ngIf="isRangeToShow()">
							<mat-icon class="header-icon" *ngIf="slideView">toll</mat-icon>
							<mat-icon class="header-icon" *ngIf="!slideView">input</mat-icon>
						</button>
						<button mat-icon-button (click)="withAlarm = !withAlarm;onAlarmToggle();" *ngIf="isAlarmToShow()">
							<mat-icon class="header-icon" *ngIf="!withAlarm">notifications</mat-icon>
							<mat-icon class="header-icon" *ngIf="withAlarm">notifications_off</mat-icon>
						</button>
					</div>
				</div>
				<div mat-dialog-content style="overflow: hidden; width:100%">
					<flex-head [data]="data" [property]="property" #flexhead></flex-head>
				</div>
			</div>
		</mat-tab>
		<mat-tab label="{{'gauges.property-events' | translate}}" *ngIf="eventsSupported">
			<div style="max-height: 540px; overflow-y: auto; overflow-x: hidden; padding-top: 15px;">
				<div style="display: block;">
					<div class="toolbox">
						<button mat-icon-button (click)="onAddEvent()">
							<mat-icon>add_circle_outline</mat-icon>
						</button>
					</div>
				</div>
				<div mat-dialog-content style="overflow: hidden; width:100%;">
					<flex-event [property]="property" [views]="views" [data]="data" [inputs]="inputs" #flexevent *ngIf="eventsSupported" style="padding-bottom: 5px"></flex-event>
				</div>
			</div>
        </mat-tab>
		<mat-tab label="{{'gauges.property-actions' | translate}}" *ngIf="actionsSupported">
			<div style="max-height: 540px; overflow-y: auto; overflow-x: hidden; padding-top: 15px;">
				<div style="display: block;">
					<div class="toolbox">
						<button mat-icon-button (click)="onAddAction()">
							<mat-icon>add_circle_outline</mat-icon>
                        </button>
						<!-- <button mat-icon-button (click)="slideActionView = !slideActionView; onActionRangeViewToggle()">
							<mat-icon class="header-icon" *ngIf="slideActionView">toll</mat-icon>
							<mat-icon class="header-icon" *ngIf="!slideActionView">input</mat-icon>
						</button>-->
					</div>
				</div>
				<div mat-dialog-content style="overflow: hidden; width:100%">
					<flex-action [data]="data" [property]="property" #flexaction *ngIf="actionsSupported" style="padding-bottom: 5px"></flex-action>
				</div>
			</div>
        </mat-tab>        
	</mat-tab-group>
	<div mat-dialog-actions style="display: inline-block; position: absolute; bottom: 10px; right: 10px">
		<button mat-raised-button (click)="onNoClick()">{{'dlg.cancel' | translate}}</button>
		<button mat-raised-button color="primary" (click)="onOkClick()" [mat-dialog-close]="data" cdkFocusInitial>{{'dlg.ok' | translate}}</button>
	</div>
</div>